<template>
  <view class="container">

    <swiper :indicator-dots="false" :autoplay="false" circular previous-margin="92rpx" next-margin="92rpx"
      class="swiper">

      <swiper-item v-for="(item, index) in posters" :key="index">

        <canvas id="canvas" type="2d" style="width:284px; height:510px;" />
<!--        <view class="y">
          666
        </view> -->

      </swiper-item>

    </swiper>

  </view>
</template>

<script>
  import DrawPoster from 'u-draw-poster'
  import drawPainter from "js_sdk/u-draw-poster/extends/draw-painter";
  import drawQrCode from "js_sdk/u-draw-poster/extends/draw-qr-code";
  // 引入声明式绘制插件
  DrawPoster.use(drawPainter)
  // 如果需要绘制二维码, 需要另外引入二维码扩展
  DrawPoster.use(drawQrCode)

  export default {
    data: () => ({
      imgUrl: "",
      width: 200,
      height: 380,
      // 商品图片
      posters: ["http://assets.xtuoxc.com/goods/2021-06-17/49b7dff6-7d13-4d62-a7cf-7e4e22c5c7b5.jpg",
        "http://assets.xtuoxc.com/goods/2021-06-17/1326996d-8334-45a3-bec3-315ad47df412.jpg",
        "http://assets.xtuoxc.com/goods/2021-06-17/227985e9-1399-4708-a50e-048d712d76b9.jpg"
      ],
      // 小程序二维码
      qrcode: '/static/9.jpg',
      // 商品对象
      params: {
        // 邀请人
        nickName: '云忆',
        // 商品标题
        title: '【a1水果土司】网红零食面包早餐 水果夹心土司2整箱 3种口位任选',
        // 活动价
        disCount: '19.90',
        // 售价
        salePrice: '39.90',
        // 原价
        marketPrice: '59.80',
        posters: []
      }

    }),

    async onReady() {
      // 1.传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
      const dp = await DrawPoster.build({
        selector: "canvas",
        debugging: true,
      });
      // 2.设置长高为100px的矩形宽高
      dp.canvas.width = 284
      dp.canvas.height = 510
      // 声明绘制描述信息
      dp.painter({
        width: 284,
        height: 510,
        contents: [
          // {
          //   type: 'qr-code',
          //   left: 50,
          //   top: (380 / 2) - 50,
          //   size: 100,
          //   content: 'http://www.baidu.com'
          // },

          // 背景图
          {
            type: 'image',
            src: '/static/images/store/bg_share_posters.png',
            width: 284,
            height: 510,
            left: 0,
            top: 0
          },
          // `bold ${12}px sans-serif`
          // 二维码
          {
            type: 'image',
            src: `${this.qrcode}`,
            width: 68,
            height: 68,
            left: 108,
            top: 12,
            radius: 50
          },
          // 邀请人
          {
            type: 'text',
            content: `${this.params.nickName}邀请您抢购`,
            width: 120,
            height: 20,
            left: 84,
            top: 108,
            color: '#FEFBF8',
            fontFamily: '',
            fontSize: '16px',
            fontWeight: 400,
            fontStyle: ''
          },
          // 商品标题
          {
            type: 'line-feed-text',
            content: `${this.params.title}`,
            width: 230,
            height: 24,
            left: 26,
            top: 392,
            lineHeight: 24,
            fontSize: '12px',
            color: '#FEFBF8',
            fontFamily: '',
            fontWeight: '',
            fontStyle: ''
          },
          // 商品图片
          {
            type: 'image',
            src: `${this.posters}`,
            width: 244,
            height: 244,
            left: 20,
            top: 126
          },
          // 优惠价
          {
            type: 'text',
            content: `${this.params.disCount}元`,
            width: 48,
            height: 16,
            left: 62,
            top: 452,
            color: '#FEFBF8',
            fontFamily: '',
            fontSize: '12px',
            fontWeight: '',
            fontStyle: ''
          },
          // 团购价
          {
            type: 'text',
            content: `${this.params.salePrice}`,
            width: 60,
            height: 24,
            left: 86,
            top: 486,
            color: '#FEFBF8',
            fontFamily: '',
            fontSize: '20px',
            fontWeight: '',
            fontStyle: ''
          },
          // 原价
          {
            type: 'text',
            content: `原价${this.params.marketPrice}元`,
            width: 78,
            height: 16,
            left: 170,
            top: 486,
            color: '#FEFBF8',
            fontFamily: '',
            fontSize: '12px',
            fontWeight: '',
            fontStyle: '',
          },
          // 划线
          {
            type: 'rect',
            width: 88,
            height: 1,
            left: 165,
            top: 482,
            background: '#FEFBF8',
            radius: 0
          },
          // PainterImageInfo
        ]
      })
      let b = await dp.createImagePath();
      // 创建图像
      console.log(852)
      // interface PainterImageInfo {
      //   /** 图片的宽度，固定值 */
      //   width: 100
      //   /** 图片的高度，固定值 */
      //   height: 100
      //   /** 元素锚点距左边的距离; 默认: 0 */
      //   left?: 0
      //   /** 元素锚点距上边的距离; 默认: 0 */
      //   top?: 0
      //   /** 绘制图片元素 */
      //   type: 'image'
      //   /** 图片地址 */
      //   src: '/static/2.png'
      //   /** 图片自适应, 可参考 css 属性 object-fit */
      //   objectFit?: ImageFitOption['objectFit']
      //   /** 图片在元素容器中显示的位置，可参考 css 属性 object-position */
      //   position?: ImageFitOption['intrinsicPosition']
      //   /** 圆角尺寸; 默认: 0 */
      //   radius?: 0
      // }

      // dp.painter(PainterContainerOption)
      // interface PainterContainerOption {
      //   /** 绘制画布宽度 */
      //   width: number
      //   /** 绘制画布高度 */
      //   height: number
      //   /** 绘制项的数组 */
      //   contents: Array <
      //     // 绘制图片信息
      //     PainterImageInfo |
      //     // 绘制矩形信息
      //     PainterRectInfo |
      //     // 绘制文字信息
      //     PainterTextInfo |
      //     // 绘制换行文字信息
      //     PainterLineFeedTextInfo |
      //     // 绘制扩展二维码信息
      //     PainterQrCodeInfo >
      // }

      // 创建图像
      console.log(await dp.createImagePath());
    },

  }
</script>

<style lang="scss">
  .container {
    padding: 20px;
    font-size: 14px;
    line-height: 24px;
    background-color: gray;
    background-color: #F0F0F0;
  }

  .swiper {
    /* margin-top: 150rpx; */
    height: 1020rpx;
    flex: 1;
  }
  .y{
    height: 300rpx;
    width: 200rpx;
    background-color: pink;
  }
</style>
